<template>
<div class="layout-container">
    <echarts ref="c1" height="300px" :option="option"></echarts>
</div>
</template>

<script lang="ts">
import echarts from '@/components/echarts/zhCharts.vue';
export default {
	name: 'echartsDemo',
	components: { echarts },
    
    setup() {
		const option = {
				grid: {
					top: 50,
					right: 20,
					bottom: 30,
					left: 30,
				},
				tooltip: {
					trigger: 'item',
				},
				series: [
					{
						name: '面积模式',
						type: 'pie',
						radius: [20, 50],
						center: ['50%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 8,
						},
						data: [
							{ value: 40, name: '监测设备预警' },
							{ value: 38, name: '天气预警' },
							{ value: 32, name: '任务预警' },
							{ value: 30, name: '病虫害预警' },
						],
					},
				],
			};
        return {
			option
		};
    }
}
</script>